<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>校园风光展示</title>
    <style>
      .box {
        width: 800px;
        height: 150px;
        background-color: pink;
        margin: auto;
      }
      .boxL {
        width: 200px;
        height: 150px;
        background-color: blue;
        float: left;
      }
      .boxR {
        width: 600px;
        height: 150px;
        background-color: aqua;
        float: left;
      }
      .box1 {
        width: 179px;
        height: 39px;
        padding: 10px;
        border: 1px solid green;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
        color: aquamarine;
      }
      .box2 {
        width: 200px;
        height: 90px;
        background-color: green;
        background-image: url("fgt12.jpg");
        background-size: 200px 90px;
      }
      .n {
        width: 600px;
        height: 90px;
        background-color: green;
      }
      .m {
        width: 600px;
        height: 60px;
        background-color: green;
      }
      .box3 {
        width: 300px;
        height: 90px;
        background-color: blueviolet;
        float: left;
        background-image: url("fgt11.jpg");
        background-size: 300px 90px;
      }
      .box4 {
        width: 100px;
        height: 90px;
        background-color: plum;
        float: left;
        box-sizing: border-box;
        writing-mode: vertical-rl;
        text-orientation: upright;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
      }
      .box5 {
        width: 200px;
        height: 90px;
        background-color: green;
        float: left;
        background-image: url("1.jpg");
        background-size: 200px 90px;
      }
      .box6 {
        width: 200px;
        height: 60px;
        background-color: rgb(0, 60, 128);
        float: left;
        box-sizing: border-box;
        padding-left: 30px;
        padding-top: 5px;
        font-size: larger;
        color: antiquewhite;
      }
      .box7 {
        width: 200px;
        height: 60px;
        background-color: rgb(128, 0, 0);
        float: left;
        background-image: url("fgt14.jpg");
        background-size: 200px 60px;
      }
      .box8 {
        width: 200px;
        height: 60px;
        background-color: rgb(128, 0, 73);
        float: left;
        background-image: url("fgt13.jpg");
        background-size: 200px 60px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="boxL">
        <div class="box1">校园风光 xiaoyuangengguang</div>
        <div class="box2"></div>
      </div>
      <div class="boxR">
        <div class="n">
          <div class="box3"></div>
          <div class="box4">学术研究</div>
          <div class="box5"></div>
        </div>
        <div class="m">
          <div class="box6">学生活动xueshenghuodong</div>
          <div class="box7"></div>
          <div class="box8"></div>
        </div>
      </div>
    </div>
  </body>
</html>
